<template>
  <div class="app-container">
    <el-col :span="14" :offset="1">
      <el-form ref="form" :rules="rules" label-position="top" :model="form">
        <el-form-item label="群组ID">
          <el-input v-model="groupId" disabled />
        </el-form-item>
        <el-form-item label="群组名称" prop="name">
          <el-input v-model="form.name">
            <template slot="prepend">{{ gitServer }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="群组描述" prop="desc">
          <el-input v-model="form.desc" type="textarea" rows="4" />
        </el-form-item>
        <el-form-item label="可见性级别" prop="visibility">
          <el-radio-group v-model="form.visibility">
            <el-tooltip class="item" effect="dark" content="该群组和其项目只有其成员能以看到。" placement="top">
              <el-radio label="private">私有</el-radio>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="该群组和其内部项目只有已登录用户能看到" placement="top">
              <el-radio label="internal">内部</el-radio>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="publicContent" placement="top">
              <el-radio label="public" :disabled="!allowPublic">公开</el-radio>
            </el-tooltip>
          </el-radio-group>
        </el-form-item>
        <el-button type="success" @click="editGroup">确认修改</el-button>
        <el-button @click="$router.go(-1)">取 消</el-button>
      </el-form>
    </el-col>
  </div>
</template>

<script>
import { getData, postData } from '@/api/requestData';

export default {
  data() {
    return {
      groupId: 0,
      form: {
        name: '',
        desc: '',
        visibility: 'internal'
      },
      rules: {
        name: [
          { required: true, message: '群组名称不能为空', trigger: 'blur' }
        ]
      },
      gitServer: '',
      publicContent: '该群组和其公开项目可以被任何授权的用户看到。',
      allowPublic: true
    };
  },
  created() {
    this.groupId = this.$route.params.groupId;
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      getData('/git/group/detail/' + this.groupId).then((response) => {
        const detail = response.data.detail;
        const path = detail.full_path.split('/');
        path.pop();
        this.gitServer = response.data.gitServer + path.join('/') + '/';
        this.form.name = detail.name;
        this.form.desc = detail.description;
        const visibility = detail.visibility;
        if (visibility === 'internal' || visibility === 'private') {
          this.allowPublic = false;
          this.publicContent = '父级群组为私有或内部可访问,子组无法设置为公开';
        }
      });
    },
    editGroup() {
      postData('/git/edit/group/' + this.groupId, this.form).then(
        (response) => {
          this.$message.success(response.message);
          this.$router.go(-1);
        }
      );
    }
  }
};
</script>

<style scoped>
</style>
